<template>
  <view class="cart_content_item_info_footer_num">
    <uni-icons
      @click="
        handleOperateCount({
          type: 'del',
          item,
          index,
        })
      "
      type="minus"
      size="32"
      color="#FFA400"
    ></uni-icons>
    <view class="cart_content_item_info_footer_num_count">
      <input type="number" v-model="inputNum" @input="onInput" />
    </view>

    <uni-icons
      @click="
        handleOperateCount({
          type: 'add',
          item,
          index,
        })
      "
      type="plus-filled"
      size="32"
      color="#FFA400"
    ></uni-icons>
  </view>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: {},
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      inputNum: '0',
    }
  },
  watch: {
    inputNum(newVal) {
      console.log('newVal', newVal)
      if (newVal === '0') {
        this.inputNum = '1' // 阻止输入0，清空输入框或替换为上一个有效值等逻辑
      }
    },
    'item.goodsCount'(newVal) {
      console.log('goodsCount newVal', newVal)
      this.inputNum = newVal
    },
  },
  created() {
    this.inputNum = this.item.goodsCount
  },
  methods: {
    validateInput(field) {
      // console.log('this.item[field]', this.item.goodsCount)
      if (!field) {
        this.uniShowToast('购物车数量需要大于0')
        return false
      } else {
        return true
      }
    },
    handleOperateCount(params) {
      this.$emit('update:item', this.item)
      this.$emit('handleOperateCount', params)
    },
    onInput(e) {
      let num = e.detail.value

      if (!num || num === '0') {
        e.detail.value = ''
      }
      const param = {
        ...this.item,
        goodsCount: this.inputNum,
      }
      this.$emit('updateGoodCount', param)
    },
  },
}
</script>
<style lang="scss" scoped>
.cart_content_item_info_footer_num {
  display: flex;
  align-items: center;
  &_count {
    font-size: 26rpx;
    width: 60rpx;
    text-align: center;
  }

  &_symbol-substract {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50rpx;
    height: 50rpx;
    margin-right: 10rpx;
    border: 1rpx solid #ff8f00;
    border-radius: 50%;
  }
  &_symbol-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50rpx;
    height: 50rpx;
    margin-left: 10rpx;
    border-radius: 50%;
    color: white;
    background: linear-gradient(to left, #ff8f00, #ffb300);
  }
}
</style>
